<template>
  <el-collapse class="globalSetting">
    <el-collapse-item v-if="xAxis" name="X轴">
      <template #title>
        <div class="flex-item">
          <div class="title">X轴</div>
          <el-switch v-model="xAxis.show" @click.stop></el-switch>
        </div>
      </template>
      <setting-item-box name="单位">
        <setting-item name="名称">
          <el-input size="small" v-model="xAxis.name"></el-input>
        </setting-item>
        <setting-item name="颜色">
          <el-color-picker
            size="small"
            v-model="xAxis.nameTextStyle.color"
            show-alpha
          ></el-color-picker>
        </setting-item>
        <setting-item name="大小">
          <el-input-number
            :min="12"
            size="small"
            v-model="xAxis.nameTextStyle.fontSize"
            controls-position="right"
          ></el-input-number>
        </setting-item>
        <setting-item name="偏移量">
          <el-input-number
            :min="5"
            size="small"
            v-model="xAxis.nameGap"
            controls-position="right"
          ></el-input-number>
        </setting-item>
      </setting-item-box>
      <setting-item-box name="轴线">
        <setting-item name="展示">
          <el-switch size="small" v-model="xAxis.axisLine.show"></el-switch>
        </setting-item>
        <setting-item name="颜色">
          <el-color-picker
            size="small"
            v-model="xAxis.axisLine.lineStyle.color"
            show-alpha
          ></el-color-picker>
        </setting-item>
        <setting-item name="粗细">
          <el-input-number
            :min="1"
            size="small"
            v-model="xAxis.axisLine.lineStyle.width"
            controls-position="right"
          ></el-input-number>
        </setting-item>
        <setting-item name="位置">
          <el-select v-model="xAxis.position" size="small">
            <el-option
              v-for="item in axisConfig.xposition"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          /></el-select>
        </setting-item>
      </setting-item-box>
    </el-collapse-item>
    <el-collapse-item v-if="yAxis" name="Y轴">
      <template #title>
        <div class="flex-item">
          <div class="title">Y轴</div>
          <el-switch v-model="yAxis.show" @click.stop></el-switch>
        </div>
      </template>
      <setting-item-box name="单位">
        <setting-item name="名称">
          <el-input size="small" v-model="yAxis.name"></el-input>
        </setting-item>
        <setting-item name="颜色">
          <el-color-picker
            size="small"
            v-model="yAxis.nameTextStyle.color"
            show-alpha
          ></el-color-picker>
        </setting-item>
        <setting-item name="大小">
          <el-input-number
            :min="12"
            size="small"
            v-model="yAxis.nameTextStyle.fontSize"
            controls-position="right"
          ></el-input-number>
        </setting-item>
        <setting-item name="偏移量">
          <el-input-number
            :min="5"
            size="small"
            v-model="yAxis.nameGap"
            controls-position="right"
          ></el-input-number>
        </setting-item>
      </setting-item-box>
      <setting-item-box name="轴线">
        <setting-item name="展示">
          <el-switch size="small" v-model="yAxis.axisLine.show"></el-switch>
        </setting-item>
        <setting-item name="颜色">
          <el-color-picker
            size="small"
            v-model="yAxis.axisLine.lineStyle.color"
            show-alpha
          ></el-color-picker>
        </setting-item>
        <setting-item name="粗细">
          <el-input-number
            :min="1"
            size="small"
            v-model="yAxis.axisLine.lineStyle.width"
            controls-position="right"
          ></el-input-number>
        </setting-item>
        <setting-item name="位置">
          <el-select v-model="yAxis.position" size="small">
            <el-option
              v-for="item in axisConfig.yposition"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          /></el-select>
        </setting-item>
      </setting-item-box>
    </el-collapse-item>
    <el-collapse-item v-if="legend" name="图例">
      <template #title>
        <div class="flex-item">
          <div class="title">图例</div>
          <el-switch v-model="legend.show" @click.stop></el-switch>
        </div>
      </template>
      <setting-item-box name="图例文字">
        <setting-item name="颜色">
          <el-color-picker
            size="small"
            v-model="legend.textStyle.color"
            show-alpha
          ></el-color-picker>
        </setting-item>
        <setting-item name="大小">
          <el-input-number
            :min="12"
            size="small"
            v-model="legend.textStyle.fontSize"
            controls-position="right"
          ></el-input-number>
        </setting-item>
      </setting-item-box>
      <setting-item-box name="图例位置">
        <setting-item name="x轴">
          <el-select v-model="legend.x" size="small">
            <el-option
              v-for="item in legendConfig.lengendX"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          /></el-select>
        </setting-item>
        <setting-item name="y轴">
          <el-select v-model="legend.y" size="small">
            <el-option
              v-for="item in legendConfig.lengendY"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          /></el-select>
        </setting-item>
      </setting-item-box>
      <setting-item-box name="图例信息">
        <setting-item name="方向">
          <el-select v-model="legend.orient" size="small">
            <el-option
              v-for="item in legendConfig.orient"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          /></el-select>
        </setting-item>
        <setting-item name="形状">
          <el-select v-model="legend.icon" size="small">
            <el-option
              v-for="item in legendConfig.shape"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          /></el-select>
        </setting-item>
      </setting-item-box>
      <setting-item-box name="图例大小">
        <setting-item name="宽">
          <el-input-number
            :min="12"
            size="small"
            v-model="legend.itemWidth"
            controls-position="right"
          ></el-input-number>
        </setting-item>
        <setting-item name="高">
          <el-input-number
            :min="12"
            size="small"
            v-model="legend.itemHeight"
            controls-position="right"
          ></el-input-number>
        </setting-item>
      </setting-item-box>
    </el-collapse-item>
  </el-collapse>
</template>

<script setup>
import { computed, defineProps } from "vue";
import {
  axisConfig,
  legendConfig,
} from "@/packages/chartConfiguration/echarts";
import { SettingItem, SettingItemBox } from "@/components/ChartItemSetting";

const props = defineProps({
  optionData: {
    type: Object,
    default: () => {},
  },
});

const xAxis = computed(() => {
  return props.optionData.xAxis;
});

const yAxis = computed(() => {
  return props.optionData.yAxis;
});

const legend = computed(() => {
  return props.optionData.legend;
});
</script>

<style lang="scss" scoped>
.globalSetting {
  .flex-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
::v-deep(.el-color-picker__trigger, .el-color-picker) {
  width: 100%;
}
::v-deep(.el-color-picker) {
  width: 100%;
}
::v-deep(.el-select) {
  .el-input {
    height: 24px;
  }
}
</style>
